<!--  -->
<template>
    <div>
        <table>
            <tr>
                <th>
                    id
                </th>
                <th>
                    名称
                </th>
                <th>
                    价格
                </th>
                <th>
                    数量
                </th>
                <th>
                    Actions
                </th>
            </tr>
            <tr v-for="(shop, index) in shopList" :key="index">
                <td>
                    {{shop.id}}
                </td>
                <td>
                    {{shop.title}}
                </td>
                <td>
                    {{shop.price}}
                </td>
                <td>
                    {{shop.inventory>0?shop.inventory:''}}
                </td>
                <td>
                    <button @click="addProductToCart(shop)">加入购物车</button> 
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
    data () {
        return {
        };
    },

    components: {},

    computed: mapState({
        shopList: state => state.myProductList.shopList
    }),
    mounted(){
        this.$store.dispatch('myProductList/getAllProducts')
    },

    methods: {
        ...mapActions('myCart', [
            'addProductToCart'
        ]),
    }
}

</script>
<style lang='less' scoped>
    table{
        width: 100%;
        td,th{
            height: 50px;
            button{
                padding: 10px;
            }
        }
    }
</style>